<script setup lang="ts">
import { SummaryProps } from "@/views/home/components/summary/types.ts";
import { invoke } from "@tauri-apps/api/tauri";
import HomeAddAliasView from "@/views/home/components/addAlias/index.vue";
import HomeCardAliasView from "@/views/home/components/cards/alias.vue";

defineOptions({
	name: "HomeSummaryView",
});
const props = withDefaults(defineProps<SummaryProps>(), {
	index: () => "",
	esIndexInfo: undefined,
});
const index = toRef(props, "index");
const esIndexInfo = toRef(props, "esIndexInfo");
const aliases = ref<string[]>([]);
const updateIndexAlias = ref<number>(100000);

const emit = defineEmits(["updateIndexInfo"]);

watch(index, function () {
	getIndicesAliases();
});
function getIndicesAliases(refresh: boolean = false) {
	if (index.value) {
		invoke("get_indices_aliases", {
			index: index.value,
			refresh: refresh,
		}).then((data: any) => {
			if (index.value && data[index.value] && data[index.value].aliases) {
				aliases.value = Object.keys(data[index.value].aliases);
			}
		});
	}
}

function handleAddAlias() {
	getIndicesAliases(true);
	updateIndexAlias.value = updateIndexAlias.value + 1;
	emit("updateIndexInfo");
}

function handleDeleteAlias() {
	emit("updateIndexInfo");
}

onMounted(() => {
	getIndicesAliases();
});
</script>

<template>
	<div class="home-summary-view">
		<a-descriptions bordered size="small" :column="2">
			<a-descriptions-item label="健康" :label-style="{ width: '89px' }">
				<a-badge status="processing" :text="esIndexInfo?.health" color="green" />
			</a-descriptions-item>
			<a-descriptions-item label="状态" :label-style="{ width: '103px' }">{{ esIndexInfo?.status }}</a-descriptions-item>
			<!--			<a-descriptions-item label="节点数">1</a-descriptions-item>-->
			<!--			<a-descriptions-item label="数据节点数">1</a-descriptions-item>-->
			<a-descriptions-item label="文档计数">{{ esIndexInfo?.["docs.count"] }}</a-descriptions-item>
			<a-descriptions-item label="文档删除">{{ esIndexInfo?.["docs.deleted"] }}</a-descriptions-item>
			<a-descriptions-item label="主分片">{{ esIndexInfo?.pri }}</a-descriptions-item>
			<a-descriptions-item label="副本分片">{{ esIndexInfo?.rep }}</a-descriptions-item>
			<a-descriptions-item label="存储大小">{{ esIndexInfo?.["store.size"] }}</a-descriptions-item>
			<a-descriptions-item label="主存储大小">{{ esIndexInfo?.["pri.store.size"] }}</a-descriptions-item>
			<a-descriptions-item label="别名" :span="2">
				<div class="home-summary-alias">
					<home-card-alias-view
						:index="index"
						:single-row="false"
						:close="esIndexInfo?.status == 'close'"
						:update-index-alias="updateIndexAlias"
						@delete-alias="handleDeleteAlias"
					/>
					<div class="home-summary-alias-item-btn">
						<home-add-alias-view :index="index" :close="esIndexInfo?.status == 'close'" @add-alias="handleAddAlias" />
					</div>
				</div>
			</a-descriptions-item>
		</a-descriptions>
	</div>
</template>

<style scoped lang="scss">
.home-summary-view {
	width: 100%;
	word-wrap: break-word;
	word-break: normal;
	overflow-y: auto;
	overflow-x: hidden;
}
.home-summary-alias {
	padding-top: 5px;
}
.home-summary-alias-item-btn {
	width: 100%;
	margin-top: 10px;
	text-align: center;
}
</style>
